<template>
	<view>
		<!-- 头部状态 -->
		<view class="status">
			<!-- 支付 -->
			<view class="pay">
				<view class="one">
					<view class="content" @click="pay()">{{selected}}
						<image class="bottom_bg" v-bind:class="{isRotate:isRotate}" src="../../static/top.png"/>
					</view>
					<view class="toogle" v-bind:class="{dropdown:isActive}">
						<view class="paid" v-bind:class="{active:electoral}"  @click="selected_s()">{{paid}}</view>
						<view class="unpaid" v-bind:class="{active:!electoral}" @click="unselected()">{{unpaid}}</view>
					</view>
				</view>
			</view>
			<!-- 报名方法 -->
			<view class="ways">
				<view class="two">
					<view class="content" @click="ways()">{{way}}
						<image class="bottom_bg" v-bind:class="{Rotate:Rotate}" src="../../static/top.png"/>
					</view>
					<view>
						<view class="toogle_t" v-bind:class="{pulldown:Active}">
							<view class="consultant" v-bind:class="{choices:choices_c}" @click="consultant_c()">{{consultant}}</view>
							<view class="self" v-bind:class="{choices:choices_s}" @click="myself_m()">{{myself}}</view>
							<view class="invitation" v-bind:class="{choices:choices_i}" @click="invitation_i()">{{invitation}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 添加用户 -->
			<view class="add" @click="Add()">
				<image class="grow" src="../../static/sellcoupon_and_propagation/grow.png"></image>
				<view class="client">客户</view>
			</view>
		</view>
		<view class="row"  ref="a">
			<!-- 1 -->
			<view class="clientele" v-for="(list,index) in lists" :key="list.id">
				<view class="material">
					<view class="user">
						<view class="username">
							<view class="name">{{list.name}}</view>
							<view class="tel">
								<image class="phone"  src="../../static/sellcoupon_and_propagation/phone.png"/>
								{{list.tel}}
							</view>
						</view>
						<view class="model">
							<view class="intent">意向车型:</view>
							<view class="car">{{list.car}}</view>
						</view>
						<view class="apply">
							<view class="signup">报名时间:</view>
							<view class="time">{{list.time}}</view>
						</view>
					</view>
					<view class="defray">
						<view class="wait">{{list.wait}}</view>
						<view class="mode">{{list.mode}}</view>
					</view>
				</view>
				<view class="coupon">
					<view class="prize">
						<view class="active_genre">活动奖励:</view>
						<view class="genre">{{list.genre}}</view>
					</view>
					<view class="grand_total">
						<view class="add_up">累计优惠券:</view>
						<view class="amount">{{list.amount}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 广告 -->
		<view :class="{AD:isAD,activeAD:isActiveAd}">
			<image class="zanboon" src="../../static/sellcoupon_and_propagation/zanboon.png"></image>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				selected:'已支付',//显示状态
				isRotate:false,
				isActive:false,
				paid:'已支付',
				unpaid:'待支付',
				electoral:true,
				way:'顾问报名',
				Rotate:false,
				Active:false,
				consultant:'顾问报名',
				myself:'自己报名',
				invitation:'邀约报名',
				choices_c:true,
				choices_s:false,
				choices_i:false,
				lists:[
					{
						id:1,
						name:'张大仙',
						tel:'12345678910',
						car:'拖拉机',
						time:'2019-10-21 18:00',
						wait:'待支付',
						mode:'顾问报名',
						genre:'已获得“电风扇”一台。',
						amount:'购物券1000元3张; 油卡98元1张；'	
					},
					// {
					// 	id:2,
					// 	name:'张大仙',
					// 	tel:'12345678910',
					// 	car:'拖拉机',
					// 	time:'2019-10-21 18:00',
					// 	wait:'待支付',
					// 	mode:'顾问报名',
					// 	genre:'已获得“电风扇”一台。',
					// 	amount:'购物券1000元3张; 油卡98元1张；'	
					// },
					// {
					// 	id:3,
					// 	name:'张大仙',
					// 	tel:'12345678910',
					// 	car:'拖拉机',
					// 	time:'2019-10-21 18:00',
					// 	wait:'待支付',
					// 	mode:'顾问报名',
					// 	genre:'已获得“电风扇”一台。',
					// 	amount:'购物券1000元3张; 油卡98元1张；'	
					// },
					// {
					// 	id:4,
					// 	name:'张大仙',
					// 	tel:'12345678910',
					// 	car:'拖拉机',
					// 	time:'2019-10-21 18:00',
					// 	wait:'待支付',
					// 	mode:'顾问报名',
					// 	genre:'已获得“电风扇”一台。',
					// 	amount:'购物券1000元3张; 油卡98元1张；'	
					// }
				],
				isAD:true,
				isActiveAd:false,
			}
		},
		onLoad() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res.screenHeight,'手机的高度');
					that.Height=res.screenHeight;
				}
			});
		},
		onReady(){
			let that=this;
			// console.log(that.$refs.a,'654');
			that.row=that.$refs.a.$el.clientHeight;
			that.quantity();
		},
		methods:{
			pay:function(){//支付方式
				let that=this;
				that.isActive=!that.isActive;
				that.isRotate=!that.isRotate;
				that.Active=false;
				that.Rotate=false;
			},
			selected_s:function(){
				let that=this;
				that.selected=that.paid;
				that.electoral=true;
				that.isActive=false;
				that.isRotate=false;
			},
			unselected:function(){
				let that=this;
				that.selected=that.unpaid;
				that.electoral=false;
				that.isRotate=false;
				that.isActive=false;
			},
			ways:function(){//邀约方式
				let that=this;
				that.Active=!that.Active;
				that.Rotate=!that.Rotate;
				that.isActive=false;
				that.isRotate=false;
			},
			consultant_c:function(){
				let that=this;
				that.way=that.consultant;
				that.Active=false;
				that.Rotate=false;
				that.choices_c=true;
				that.choices_s=false;
				that.choices_i=false;
			},
			myself_m:function(){
				let that=this;
				that.way=that.myself;
				that.Active=false;
				that.Rotate=false;
				that.choices_c=false;
				that.choices_s=true;
				that.choices_i=false;
			},
			invitation_i:function(){
				let that=this;
				that.way=that.invitation;
				that.Active=false;
				that.Rotate=false;
				that.choices_c=false;
				that.choices_s=false;
				that.choices_i=true;
			},
			//添加客户
			Add:function(){
				let that=this;
				uni.navigateTo({
					url: '/pages/addcustomer/addcustomer'
				});
				that.isActive=false;
				that.isRotate=false;
				that.Active=false;
				that.Rotate=false;
			},
			quantity:function(){
				let that=this;
				//let Height=that.Height-that.row;//手机高度减去内容高度
				let Height=that.Height-89;
				console.log(Height,'369');
				if(Height>that.row){
					that.isAD=true;
					that.isActiveAd=false;
				}else if(Height<that.row){
					that.isAD=false;
					that.isActiveAd=true;
				}
			}
		}
	}
</script>

<style>
	page{
		background: #F3F2F7;
	}
		.status{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 108upx;
			color: #333333;
			font-size: 28upx;
			background: #FFFFFF;
			margin-bottom: 20upx;
		}
		.status:before{
			display: table;
			content: '';
		}
			.pay{
				display: flex;
			}
				.content{
					
				}
					.bottom_bg{
						margin-left: 10upx;
						height: 12upx;
						width: 20upx;
						padding-bottom: 4upx;
					}
					.isRotate,.Rotate{
						transform: rotate(180deg);
					}
			.toogle{
				display: none;
				position: absolute;
				margin-top: 10upx;
				text-align: center;
				left: 78upx;
				z-index:1;
				/* border: 1upx solid #007AFF; */
				height:140upx;
				width: 208upx;
				font-size: 28upx;
				background:rgba(255,255,255,1);
				box-shadow:0px 8px 6px 0px rgba(0,0,0,0.1);
				border-radius:0px 0px 4px 4px;
				color: #666666;
			}
				.paid{
					margin-top: 25upx;
				}
				.unpaid{
					margin: 20upx;
				}
			.dropdown{
				display: block;
			}
				.active{
					color:#333333 ;
				}
	    .ways{

		}
			.two{
			}
			.toogle_t{
				display: none;
				position: absolute;
				right: 198upx;
				margin-top: 10upx;
				text-align: center;
				height:230upx;
				width: 208upx;
				font-size: 28upx;
				background:rgba(255,255,255,1);
				box-shadow:0px 8px 6px 0px rgba(0,0,0,0.1);
				/* border-radius:0px 0px 4px 4px; */
				border-radius:4px;
				color: #666666;
			}
				.consultant{
					margin-top: 10upx;
				}
				.self{
					margin-top: 50upx;
				}
				.invitation{
					margin-top: 50upx;
				}
			.pulldown{
				display: block;
			}
				.choices{
					color:#333333;
				}
	.add{
		display: flex;
		align-items: center;
		flex-flow: column;
		color:#EA2814 ;
		font-size: 22upx;
		margin-right: 36upx;
	}
		.grow{
			height: 36upx;
			width: 36upx;
		}
		.clientele{
			display: flex;
			flex-direction: column;
			background: #FFFFFF;
			margin-bottom: 20upx;
			
		}
			.material{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 180upx;
				border-bottom: 2upx dashed  #E6E6E6 ;
				margin-left: 30upx;
				margin-right: 30upx;
			}
				.user{
					display: flex;
					flex-flow: column;
					justify-content: center;
				}
					.username{
						display: flex;
						align-items: center;
					}
						.name{
							color: #333333;
							font-size: 30upx;
							font-weight: 700;
						}
						.tel{
							color: #666666;
							font-size: 28upx;
							margin-left: 30upx;
						}	
							.phone{
								height: 20upx;
								width: 14upx;
								margin-right: 4upx;
							}
					.model{
						display: flex;
						align-items: center;
						font-size: 28upx;
						margin: 8upx 0upx;
					}
						.intent{
							color: #333333;
							
						}
						.car{
							color: #FFFFFF;
							background:#D60C09;
							border-radius:4upx;
							padding: 8upx 20upx;
							margin-left: 10upx;
						}
					.apply{
						display: flex;
						color:#AAAAAA;
						font-size:24upx;
						
					}
						.signup{
							margin-right: 16upx;
						}
				.defray{
					display: flex;
					flex-flow: column;
					align-items: center;
					justify-content: center;
					/* margin-right: 30upx; */
					
				}
					.wait{
						color: #333333;
						font-size: 30upx;
					}
					.mode{
						margin-top: 2upx;
						color: #AAAAAA;
						font-size: 22upx;
					}
			.coupon{
				margin-top: 24upx;
				padding-bottom:24upx ;
				display: flex;
				flex-flow: column;
				
			}
				.prize,.grand_total{
					display: flex;
					color: #333333;
					font-size: 28upx;
					margin-left: 30upx;
					font-weight: 700;
				}
					.genre,.amount{
						margin-left: 4upx;
						font-weight: normal;
					}
		.AD{
				position: absolute;
				margin-bottom: 20upx;
				bottom: 0;
				left: 267upx;
				
			}
		.activeAD{
			position: relative;
			display: flex;
			justify-content: center;
			margin-top:34upx;
			margin-bottom: 20upx;
		}
				.zanboon{
					height: 28upx;
					width: 216upx;
					
				}
</style>
